<template>
  <div  class=" bread flex-start">
  <!-- <el-breadcrumb separator="/">
   <el-breadcrumb-item
    v-for="(item,index) in breadList"
    :key="index"
    :to="{ path: item.path }"
   >{{item.meta.title}}</el-breadcrumb-item>
  </el-breadcrumb> -->

  <div @click="to(item.path)" v-for="(item,index) in breadList" :key="index" :class="[item.path===$route.path?'active':'']">{{item.meta.title}}<span class="fenge" v-if="$route.path!==item.path">/</span></div>

  </div>
</template>

<script>
export default {
  data () {
    return {
      breadList: [] // 路由集合
    }
  },
  watch: {
    $route: {
      immediate: true,
      handler (val) {
        this.getBreadcrumb(val)
      }
    }
  },
  methods: {
    // isHome (route) {
    //   return route.name === 'home'
    // },
    to (val) {
      this.$router.push({
        path: val
      })
    },
    getBreadcrumb (val) {
      // console.log(val.matched)
      if (val) {
        if (val.matched.length > 1) {
          if (val.meta.main) {
            this.breadList = [{ path: val.path, meta: val.meta }]
          } else if (val.meta.secMain) {
            this.breadList = [{ path: val.matched[1].path, meta: val.matched[1].meta }, { path: val.path, meta: val.meta }]
          } else {
            const newMatch = val.matched.filter((item, index) => index > 0)
            this.breadList = newMatch.map(item => { return { path: item.path, meta: item.meta } })
          }
          // if(!val.matched[val.matched.length - 2].redirect){}
          // const newMatch = val.matched.filter((item, index) => index > 0)
          // const test = newMatch.map(item => { return { path: item.path, meta: item.meta } })
          // // console.log(test)
        } else {

        }
      }
    }
  },
  created () {
    this.getBreadcrumb()
  }
}

</script>

<style lang="scss" scoped>
.it{
  display: inline-block;
  margin-right: 10px;
}
.bread{
  color: #A5AEBF;
  height: 14px;
  margin-top: 24px;
  margin-left: 24px;
  // overflow: hidden;
  line-height: 14px;
  font-size: 14px;
}
.fenge{
  display: inline-block;
  margin: 0 5px;
  // margin: 0 5px;
}
.active{
  color: #3D4966;
}

</style>
